<template>
  <div class="app-container">
    <!--地图div-->
    <div style="position:absolute;top:0px;left:0px;width:100%;height:100%;">
      <UrgencyMap
          :queryMapBool="queryMapBool"
          :mapExtent="mapExtent"
          @showQueryMapDraw="showQueryMapDraw"
      ></UrgencyMap>
    </div>
    <!--index页面div-->
    <div id="urgencyMapDiv" class="ol-popup">
        <el-button type="primary" @click="handleAssess" style="margin:20px;">评估</el-button>

        <div class="showAssess" v-if="openAssess">
            <p>设定评估范围</p>
            <el-transfer :titles="['行政区划', '选中区划']" :button-texts="['删除', '添加']" v-model="value" :data="cityData" />
            <div class="footer">
                <el-button type="primary" @click="openAssess = false">取消</el-button>
                <el-button type="primary" @click="setParameter" :disabled="value.length == 0">设定参数</el-button>
            </div>
        </div>

        <el-dialog v-model="openParameter" width="650px" title="设定参数" append-to-body>
            <p></p>
            <el-form ref="assessPopRef" :model="queryParams" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="建筑物单体数据" prop="buildData">
                            <el-input v-model="queryParams.buildData" placeholder="请输入数据版本号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="text" style="color: #107ce5;border: none!important;margin-left: 20px;">查询
                        </el-button>
                    </el-col>
                    <el-col :span="4">
                        <p style="color:red;margin: 7px 10px;cursor: pointer;" @click="handleExplain">公式说明</p>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="人口普查数据" prop="popData">
                            <el-input v-model="queryParams.popData" placeholder="请输入数据版本号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="text" style="color: #107ce5;border: none!important;margin-left: 20px;">查询
                        </el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="死亡人数" label-width="70px">
                            <el-table stripe :data="selectValue" style="width: 100%;">
                                <el-table-column prop="province" align="center" label="省" show-overflow-tooltip />
                                <el-table-column prop="city" align="center" label="市" show-overflow-tooltip />
                                <el-table-column prop="prefecture" align="center" label="区县" show-overflow-tooltip />
                                <el-table-column label="死亡人数" align="center" class-name="small-padding fixed-width"
                                    width="200">
                                    <template #default="scope">
                                        <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="openParameter = false">退出</el-button>
                    <el-button type="primary" @click="toAssess">评估</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="openExplain" width="650px" title="需紧急安置模型" append-to-body>
            <p></p>
            <el-row>
                <el-col class="tab-title">需紧急安置模型</el-col>
                <el-col>
                    <span class="indent">系统根据房屋倒塌和损坏计算需转移安置人数，对于地震评估区需紧急安置人数的计算，采用国家标准《地震现场工作第4部分：灾害直接损失评估》（GB/T
                        18208.4-2011）算法：</span><br />
                </el-col>
                <el-col>
                    <br /><br />
                    <span
                        style="font-size: 16px;font-weight: bold;font-style: italic;margin: 10px 0;margin-left:32%; display: inline-block;">T
                        = ——————<span style="position: relative;top: -12px;left: -90px;">c + d + e / 2</span><span
                            style="position: relative;top: 12px;left: -140px;">a</span><span
                            style="position:relative;left:-95px;"> × b - f</span>
                    </span><br /><br />

                </el-col>
                <el-col>
                    <span
                        class="indent">式中，a为户均居住面积，b为户均人口，c为所有住宅房屋的毁坏面积，d为非简易房屋的严重破坏面积，e为非简易房屋中等破坏面积与简易房屋破坏面积之和，f为死亡人数。</span><br />
                </el-col>
                <el-col>
                    <span
                        class="indent">简易房屋：结构类型为砖木房屋、土结构房屋、木结构房屋、石结构房屋、其他结构，非简易房屋：高层建筑、钢结构房屋、多层钢筋混凝土房屋、砌体房屋。</span><br />
                </el-col>
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="openExplain = false">退出</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
  </div>
</template>

<script setup>
//地图
import UrgencyMap from '@/map/assess/urgency/map.vue';
import { getImport,getExtentByIaId } from "@/api/business/activities";
import { getProvince, getChildArea } from "@/api/system/division";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const openExplain = ref(false);
const openAssess = ref(false);
const openParameter = ref(false);
const cityData = ref([]);
const province = ref();
const city = ref();
const value = ref([]);
const selectValue = ref([]);
const data = reactive({
    queryParams: {
        buildData: '',
        popData: '',
    },
    rules: {
        buildData: [{ required: true, message: "建筑物单体数据版本号不能为空", trigger: "blur" }],
        popData: [{ required: true, message: "人口普查数据不能为空", trigger: "blur" }],
    }
})
const { queryParams, rules, } = toRefs(data)
function handleAssess () {
    openAssess.value = !openAssess.value;
}
function setParameter () {
    selectValue.value = [];
    value.value.forEach(item => {
        selectValue.value.push({ province: province.value, city: city.value, prefecture: item })
    })
    openAssess.value = false;
    openParameter.value = true;
}
function handleExplain () {
    openExplain.value = true;
};
function getCity () {
    getImport(route.query.id).then(res => {
        province.value = res.data.importantActivity.iaProvince;
        if (res.data.importantActivity.countiesId) {
            city.value = res.data.importantActivity.iaCity;
            cityData.value = [{ key: res.data.importantActivity.iaCounties, label: res.data.importantActivity.iaCounties }]
        } else {
            city.value = res.data.importantActivity.iaCity;
            let cityId = res.data.importantActivity.cityId;
            getChildArea(cityId).then(response => {
                cityData.value = response.data;
                cityData.value.forEach(item => {
                    item.key = item.name;
                    item.label = item.name;
                });
            });
        }
    })
}
getCity();



//地图传参--start
const queryMapBool = ref(false);//是否开启地图圈选
//地图圈选结果参数
const queryMapDrawResult = ref({
  leftX:null,
  leftY:null,
  rightX:null,
  rightY:null,
  centerX:null,
  centerY:null,
});
//地图圈选
const queryMapClick = ()=>{
  queryMapBool.value = false;//关闭地图圈选
  //清空行政区划选择
  selectValue.value = [];
  selectValueId.value = [];
  nextTick(() => {
    queryMapBool.value = true;//开启地图圈选
  });
}
//关闭地图圈选
const clearQueryMapClick = ()=>{
  queryMapBool.value = false;//关闭地图圈选
  //清空地图圈选结果参数
  queryMapDrawResult.value = {
    leftX:null,
    leftY:null,
    rightX:null,
    rightY:null,
    centerX:null,
    centerY:null,
  }
}
//地图圈选结果
const showQueryMapDraw = (array)=>{
  console.log("地图圈选结果");
  console.log(array);
  let polygonWkt = array[0];
  let extent = array[1];
  let center = array[2];
  queryMapDrawResult.value = {
    leftX:extent[0],
    leftY:extent[1],
    rightX:extent[2],
    rightY:extent[3],
    centerX:center[0],
    centerY:center[1],
  }
}

//获取活动行政区划的范围
const mapExtent = ref([]);
function getMapExtentByIaId() {
  getExtentByIaId(route.query.id).then(res => {
    let data = res.data;
    console.log(data);
    //BOX(113.51660441700005 37.43676435400005,115.47735626200006 38.76359765400008)
    if(data.indexOf("BOX(")!=-1){
      //mapExtent.value = [113.51660441700005, 37.43676435400005,115.47735626200006, 38.76359765400008];
      let arr = data.split("BOX(")[1].split(")")[0].split(",");
      if(arr.length==2){
        let leftBottom = arr[0].split(" ");
        let rightTop = arr[1].split(" ");
        if(leftBottom.length==2 && rightTop.length==2){
          let left = Number(leftBottom[0]);
          let bottom = Number(leftBottom[1]);
          let right = Number(rightTop[0]);
          let top = Number(rightTop[1]);
          mapExtent.value = [left,bottom,right,top];
        }
      }
    }
  });
}
getMapExtentByIaId();
//地图传参--end
</script>

<style lang="scss" scoped>
:deep(.el-transfer__buttons) {
    padding: 0 10px;

    .el-transfer__button {
        margin: 15px 0;
        display: block;
    }

    .el-transfer__button:nth-child(2) {
        margin-left: 0px;
    }

    .el-button+.el-button {
        margin-left: 0px;
    }
}

.showAssess {
    position: absolute;
    top: 20px;
    left: 80px;
    width: 536px;
    padding: 20px;
    background: rgba($color: #fff, $alpha: 0.7);//zyt修改
    border: 1px solid #000;

    p {
        font-weight: bold;
    }
}

.footer {
    text-align: center;
    margin-top: 20px;
}

.tab-title {
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #0D9AFF;
    font-family: PingFangSC-Medium;
    padding-left: 10px;
    margin-bottom: 20px;
}

.indent {
    display: inline-block;
    text-indent: 2em;
}
</style>